<template>
  <!-- 榜单 -->
  <div class="container">
    <div class="side">
      <div class="sidebar">
        <div class="sidebar-title" @click="isUp = !isUp">
          <span>所有榜单</span>
          <span
            :class="['downUp', `el-icon-arrow-${isUp ? 'up' : 'down'}`]"
          ></span>
        </div>
        <div
          class="sidebar-list"
          :style="{
            height: isUp ? '0' : 'auto',
          }"
        >
          <div
            v-for="item in rankingList"
            :key="item.id"
            @click="changeRank(item.id, item.name)"
          >
            <img :src="item.coverImgUrl" alt="" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="conHeader">
        <span class="title">{{ currentRankName }}</span>
        <span class="time">{{ updateTime }} 更新</span>
        <el-button type="primary" icon="el-icon-video-play">播放全部</el-button>
      </div>
      <div class="rankWrap">
        <div class="checkAll">
          <el-checkbox>全选</el-checkbox>
        </div>
        <div
          :class="{
            checkbox: true,
            red: index < 3,
          }"
          v-for="(item, index) in musicList"
          :key="index"
          @click="toPlayMusic(item.id)"
        >
          <el-checkbox></el-checkbox>
          <span class="num">{{ index + 1 }}</span>
          <span class="name">{{ item.name }}</span>
          <span class="icons">
            <span class="el-icon-video-play"></span>
            <span class="el-icon-download"></span>
            <span class="el-icon-share"></span>
          </span>
          <span class="time">{{ durationTime(item.dt) }}</span>
        </div>
      </div>
      <div class="download">
        <span>查看更多内容，请下载客户端 </span>
        <el-button type="primary">立即下载</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { gfRequest } from "../../utils/gfRequest";

export default {
  name: "Ranking",
  data() {
    return {
      rankingList: [],
      currentRankId: "",
      currentRankName: "",
      musicList: [],
      isUp: false,
    };
  },
  async mounted() {
    const result = await gfRequest("/toplist");
    this.rankingList = result.data.list;
    this.currentRankId = result.data.list[0].id;
    this.currentRankName = result.data.list[0].name;
    this.getMusicList();
  },
  methods: {
    //计算歌曲的时间用于在页面中展示
    durationTime(value) {
      const minute = Math.floor(value / 1000 / 60);
      const second = Math.floor((value / 1000) % 60);
      return minute + ":" + second;
    },

    //获取歌曲列表
    async getMusicList() {
      const { currentRankId } = this;
      const { data } = await gfRequest(`/top/list?id=${currentRankId}`);
      this.musicList = data.playlist.tracks.slice(0, 22);
    },

    //点击排行榜中的内容
    changeRank(id, name) {
      this.currentRankId = id;
      this.currentRankName = name;
      this.getMusicList();
    },

    //点击歌曲的每一项去进行播放
    toPlayMusic(id) {
      //跳转到歌曲播放页面(传入歌曲id)
      this.$router.push(`/musicplayer?id=${id}`);
    },
  },
  computed: {
    updateTime() {
      const time = new Date();
      const year = time.getFullYear();
      const month = time.getMonth() + 1;
      const date = time.getDate();
      return year + "-" + month + "-" + date;
    },
  },
};
</script>

<style scoped>
.container {
  margin: 40px auto 0;
  width: 1000px;
  display: flex;
}
/* 侧边栏 */
.side {
  width: 218px;
  /* border: 1px solid #eee; */
}
.sidebar {
  padding: 0 15px;
  border: 1px solid #eee;
}
.sidebar-title {
  height: 45px;
  line-height: 45px;
  display: flex;
  justify-content: space-between;
}
.downUp {
  line-height: 45px;
}
.sidebar-list {
  overflow: hidden;
}
.sidebar-list div {
  height: 36px;
  line-height: 36px;
  margin-bottom: 4px;
}
.sidebar-list div img {
  width: 15px;
  height: 15px;
  vertical-align: center;
}
.sidebar-list div span {
  padding-left: 5px;
}
/* 内容区 */
.content {
  width: 750px;
  padding: 15px 0 0 30px;
}
.conHeader {
  position: relative;
  height: 57px;
  margin-bottom: 24px;
  border-bottom: 1px dotted #cacaca;
}
.conHeader .title {
  font-size: 24px;
  padding-right: 20px;
}
.conHeader .time {
  font-size: 14px;
  color: #999;
}
.conHeader .el-button--primary {
  position: absolute;
  right: 0;
  top: 0;
}
.checkAll {
  padding: 0 10px 10px;
}
.checkbox {
  position: relative;
  height: 54px;
  line-height: 54px;
  font-size: 14px;
  padding: 0 10px;
  border-bottom: 1px dotted #cacaca;
}
.checkbox.red .num {
  color: #fe2c62;
  font-size: 18px;
}
.checkbox .num {
  color: #999;
  padding: 0 14px 0 10px;
}
.checkbox .icons {
  position: absolute;
  right: 40px;
}
.checkbox .icons span {
  margin: 0 5px;
}
.checkbox .time {
  color: #999;
  position: absolute;
  right: 0;
}
.download {
  width: 750px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
</style>